<script setup lang="ts">
import { ref } from 'vue';
import Panel from './Panel.vue';
import RoleMultiplePicker from '@/pages/system/auth/role/Picker/MultiplePicker.vue';
import UserSinglePicker from '@/pages/system/auth/user/Picker/SinglePicker.vue';
import NodeListenerTable from '@/components/flow/NodeListenerTable.vue';
import LgDict from '@/soar/components/LgDict/index.vue';
import FieldPermits from '@/components/flow/FieldPermits.vue';
import { AddCircleIcon, MinusCircleIcon } from 'tdesign-icons-vue-next';
import UserMultiplePicker from '@/pages/system/auth/user/Picker/MultiplePicker.vue';
import PostMultiplePicker from '@/pages/system/auth/post/Picker/MultiplePicker.vue';
import OrgMultiplePicker from '@/pages/system/auth/org/Picker/MultiplePicker.vue';
import NodeButtons from '@/components/flow/NodeButtons.vue';
import ProcessListenerTable from '@/components/flow/ProcessListenerTable.vue';
import { mergeButtonPermit, mergeFieldPermit } from '@/components/flow/utils';

const model = ref({});
const visible = ref(false);
defineExpose({
  open(data: any, flow: any) {
    data.fieldPermits = mergeFieldPermit(flow.fields, data.fieldPermits || [], 2);
    data.buttonPermits = mergeButtonPermit(flow.buttons, data.buttonPermits || []);
    model.value = data;
    visible.value = true;
  },
});
</script>

<template>
  <panel v-model:visible="visible" width="600px">
    <template #header>
      <input v-model="model.name" />
    </template>
    <t-form label-align="top" class="gl-h100">
      <t-tabs default-value="1" class="gl-h100 gl-tabs-auto-h gl-tabs-space">
        <t-tab-panel label="描述" value="1">
          <t-input v-model="model.description" />
        </t-tab-panel>
        <t-tab-panel label="字段权限" value="field">
          <field-permits :data="model.fieldPermits" />
        </t-tab-panel>
        <t-tab-panel label="按钮权限" value="button">
          <node-buttons :data="model.buttonPermits" />
        </t-tab-panel>
        <t-tab-panel label="节点监听器" value="nodeListener">
          <node-listener-table :data="model.nodeListeners" />
        </t-tab-panel>
        <t-tab-panel label="执行监听器" value="processListener">
          <process-listener-table :data="model.processListeners" />
        </t-tab-panel>
      </t-tabs>
    </t-form>
  </panel>
</template>

<style scoped lang="less"></style>
